<template>
  <view class="record_">
    <view class="header_wrapper">
      <image src="https://www.ylnumber.cn/file/test/productImage/20230713/cd205d711a5e4d28b2ac23822030fa25.png"></image>
      <view class="header_">
        <view class="left_">
          <view>
            <text>￥</text>
            <view>{{ list.arrive||0 }}</view>
          </view>
          <text>已提现(元)</text>
        </view>
        <view class="right_">
          <view>
            <text>￥</text>
            <view>{{ list.await||0 }}</view>
          </view>
          <text>提现待审核(元)</text>
        </view>
      </view>
    </view>
    <view class="record_wrapper">
      <view class="item_wrapper" v-for="(item, index) in records" :key="index">
        <view class="time_wrapper">
          <view class="time_">申请时间: {{ item.applyTime.replace(/T/g,' ').replace(/Z/g,'') }}</view>
          <!--         待审核背景 -->
          <view class="status_">
            <view>{{ auditStatusFn(item.auditStatus) }}</view>
            <image
              src="/static/record/2.png"
              v-if="item.auditStatus == '3'"
            ></image>
            <image
              src="/static/record/3.png"
              v-if="item.auditStatus == '5'"
            ></image>
            <image
              src="/static/record/4.png"
              v-if="item.auditStatus == '4'"
            ></image>
            <image
              src="/static/record/5.png"
              v-if="item.auditStatus == '1' || item.auditStatus == '2'"
            ></image>
          </view>
        </view>
        <view class="info_wrapper">
          <view class="top_">
            <view class="item_">
              <text>实际到账金额</text>
              <view class="item_color">￥{{ item.money }}</view>
            </view>
            <view class="item_">
              <text>提现金额</text>
              <view>￥{{ item.cashMoney }}</view>
            </view>
            <view class="item_">
              <text>手续费</text>
              <view>￥{{ item.commission }}</view>
            </view>
          </view>
          <!--          <view class="footer_wrapper">-->
          <!--            <view class="cancellation">取消申请</view>-->
          <!--          </view>-->
          <view class="footer_wrapper" v-if="item.remarks">
            <view class="item_">备注：{{ item.remarks }}</view>
            <!--            <view class="item_">备注：这是系统审核填写的驳回信息</view>-->
            <!--            <view class="item_">备注：系统已审核打款，提现成功</view>-->
          </view>
        </view>
      </view>
    </view>
    <u-loadmore
      :status="status"
      :icon-type="iconType"
      :load-text="loadText"
      @loadmore="loadNextFn"
    />
  </view>
</template>

<script>
import { getSaveCashApplyPage } from "@/api/withdrawal";

export default {
  name: "index",
  data() {
    return {
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
      list: {},
      records: [],
      params: {
        size: 10,
        current: 1,
      },
    };
  },
  //上拉
  onReachBottom() {
    console.log("触发上拉加载");
    this.listPage();
  },
  onShow() {
    this.listPage();
  },
  methods: {
    auditStatusFn(item) {
      const status = Number(item);
      return status === 1
        ? "待审核"
        : status === 2
        ? "处理中"
        : status === 3
        ? "提现异常"
        : status === 4
        ? "已到账"
        : status === 5
        ? "不通过"
        : "未知";
    },

    async listPage() {
      this.status = "loading";
      const res = await getSaveCashApplyPage(this.params);
      if (res.code === 0) {
        this.list = res.data;
        this.records.push(...res.data.cashWithdrawalList.records);
        if (res.data.cashWithdrawalList.records.length === 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }

        if (res.data.cashWithdrawalList.records.length >= this.params.size) {
          this.params.current++;
           setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }

        if (this.records.length <= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
          res.data.cashWithdrawalList.records.length !== 0 &&
          res.data.cashWithdrawalList.records.length < this.params.size
        ) {
          this.params.current++;
           setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }
      }
    },

    //点击组件触发上拉加载
    loadNextFn() {
      this.listPage();
    },
  },
};
</script>

<style scoped lang="scss">
.record_ {
  padding: rpx(12) rpx(12) rpx(16);
  > .header_wrapper {
    position: relative;
    > image {
      width: rpx(351);
      height: rpx(100);
      vertical-align: middle;
    }
    > .header_ {
      position: absolute;
      top: rpx(21);
      left: rpx(42);
      right: rpx(42);
      bottom: 0;
      display: flex;
      justify-content: space-between;
      > view {
        display: flex;
        align-items: center;
        flex-direction: column;
        > view {
          font-weight: bold;
          color: #ffffff;
          font-size: rpx(11);
          display: flex;
          align-items: center;
          margin-bottom: rpx(4);
          > text {
            margin-top: rpx(3);
          }
          > view {
            font-size: rpx(17);
          }
        }
        > text {
          font-size: rpx(12);
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
  > .record_wrapper {
    margin-top: rpx(2);
    > .item_wrapper {
      width: rpx(351);
      background: #ffffff;
      border-radius: rpx(5);
      margin-bottom: rpx(8);
      > .time_wrapper {
        height: rpx(38);
        width: 100%;
        background: linear-gradient(
          93deg,
          #fff3e6 0%,
          rgba(255, 255, 255, 0) 100%
        );
        border-radius: rpx(5) rpx(5) 0 0;
        display: flex;
        align-items: center;
        padding-left: rpx(12);
        justify-content: space-between;
        > .time_ {
          font-size: rpx(13);
          font-weight: 400;
          color: #353535;
        }
        > .status_ {
          //width: rpx(72);
          //height: 100%;
          height: 100%;
          width: rpx(72);
          position: relative;
          > view {
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: rpx(13);
            font-weight: bold;
            color: #ffffff;
          }
          > image {
            width: rpx(72);
            height: 100%;
          }
        }
      }
      > .info_wrapper {
        padding: rpx(8) rpx(12) rpx(0);
        > .top_ {
          border-bottom: rpx(1) solid #efefef;
          padding-bottom: rpx(12);
          > .item_ {
            display: flex;
            justify-content: space-between;
            &:not(:last-child) {
              margin-bottom: rpx(8);
            }
            > text {
              font-size: rpx(13);
              font-weight: 400;
              color: #888888;
            }
            > view {
              font-size: rpx(13);
              font-weight: 400;
              color: #353535;
            }
			> .item_color{
				color: #FA5151;
			}
          }
        }
        > .footer_wrapper {
          display: flex;
          padding: rpx(12) rpx(0);
          > .cancellation {
            margin-left: auto;
            width: rpx(96);
            height: rpx(36);
            border-radius: rpx(18);
            border: rpx(1) solid #dddddd;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: rpx(15);
            font-weight: 400;
            color: #888888;
          }
          > .item_ {
            font-size: rpx(12);
            font-weight: 400;
            color: #b2b2b2;
          }
        }
      }
    }
  }
}
</style>
